<template>
  <div class="add">
    <div class="add-main">
      <div class="add-one">
        <van-icon name="arrow-left" @click="back" />
        <h3>发布房源</h3>
        <span></span>
      </div>

      <div class="add-two">
        <!-- @click="btnsearch" -->
        <p class="p1">房源信息</p>
        <p class="p2">
          <span>小区名称</span>
          <span>
            <input type="text" placeholder="请输入小区名称" />
            <van-icon name="arrow" />
          </span>
        </p>
        <p class="p3">
          <span>租&emsp;&emsp;金</span>
          <input type="text" placeholder="请输入租金/月" v-model="price"/>
          <span>￥/月</span>
        </p>
        <p class="p4">
          <span>建筑面积</span>
          <input type="text" placeholder="请输入建筑面积" v-model="size"/>
          <span>m²</span>
        </p>

        <div class="add-three">
          <span>户&emsp;&emsp;型</span>
          <van-cell is-link @click="showPopup">{{ cell }}</van-cell>
          <van-popup v-model="show" position="bottom" :style="{ height: '40%' }"
            ><van-picker
              show-toolbar
              :columns="RoomType"
              value-key="label"
              @confirm="onConfirm"
              @cancel="onCancel"
              @change="onChange"
          /></van-popup>
        </div>

        <div class="add-four">
          <span>所在楼层</span>
          <van-cell is-link @click="showPop">{{ celltwo }}</van-cell>
          <van-popup
            v-model="showone"
            position="bottom"
            :style="{ height: '40%' }"
          >
            <van-picker
              show-toolbar
              :columns="Floor"
              value-key="label"
              @confirm="onOne"
              @cancel="onTwo"
              @change="onThree"
            />
          </van-popup>
        </div>

        <div class="add-five">
          <span>朝&emsp;&emsp;向</span>
          <van-cell is-link @click="showDod">{{ cellthree }}</van-cell>
          <van-popup
            v-model="showtwo"
            position="bottom"
            :style="{ height: '40%' }"
          >
            <van-picker
              show-toolbar
              :columns="Oriented"
              value-key="label"
              @confirm="onfour"
              @cancel="onfive"
              @change="onsix"
            />
          </van-popup>
        </div>

        <div class="add-six">
          <p>房屋标题</p>
        </div>

        <div class="add-seven">
          <input
            type="text"
            placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
            v-model="context"
          />
        </div>

        <div class="add-eight">
          <p>房屋图像</p>
        </div>

        <div class="add-nine">
          <van-uploader v-model="fileList" multiple />
        </div>

        <div class="add-ten">
          <p>房屋配置</p>
        </div>

        <div class="add-ten-one">
          <ul>
            <li
              v-for="(item, index) in list"
              :key="index"
              @click="btnactive(index, item.value)"
              ref="actioe"
            >
              <i :class="`iconfont icon-` + item.i"></i>
              <span>{{ item.title }}</span>
            </li>
          </ul>
        </div>
      </div>

      <div class="add-ten-two">
        <p>房屋描述</p>
      </div>

      <div class="add-ten-three">
        <textarea
          name=""
          id=""
          cols="49"
          rows="8"
          placeholder="请输入房屋描述信息"
          v-model="area"
        ></textarea>
      </div>
    </div>
    <div class="add-footer">
      <button>取消</button>
      <button @click="btngo">提交</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      showone: false,
      showtwo: false,
      Floor: [],
      Oriented: [],
      context:'',
      price:'',
      size:'',
      area:'',
      RoomType: [],
      Supporting: [],
      fileList: [],
      cell: "请选择",
      celltwo: "请选择",
      cellthree: "请选择",
      list: [
        {
          i: "yigui",
          title: "衣柜",
        },
        {
          i: "xiyiji",
          title: "洗衣机",
        },
        {
          i: "kongtiao",
          title: "空调",
        },
        {
          i: "tianranqi-01",
          title: "天然气",
        },
        {
          i: "bingxiang",
          title: "冰箱",
        },
        {
          i: "shuinuanqigongcheng",
          title: "暖气",
        },
        {
          i: "dianshi",
          title: "电视",
        },
        {
          i: "haofangtuo400iconfont2reshuiqi",
          title: "热水器",
        },
        {
          i: "kuandai",
          title: "宽带",
        },
        {
          i: "shafa",
          title: "沙发",
        },
      ],
    };
  },
  methods: {
    //跳转到小区搜索
    // btnsearch() {
    //   this.$router.push("/Rent/Search");
    // },
    //户型开启
    showPopup() {
      this.show = true;
    },
    //所在楼层开启
    showPop() {
      this.showone = true;
    },
    //朝向开启
    showDod() {
      this.showtwo = true;
    },
    //上传头像
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    //户型确认
    onConfirm(value, index) {
      this.show = false;
      console.log(`当前值：${value.label}, 当前索引：${index}`);
      this.cell = value.label;
    },
    //户型取消
    onCancel() {
      this.show = false;
    },
    //户型改变
    onChange(picker, value, index) {
      console.log(`当前值：${value.label}, 当前索引：${index}`);
    },
    //所在楼层确认
    onOne(value, index) {
      this.showone = false;
      console.log(`当前值：${value.label}, 当前索引：${index}`);
      this.celltwo = value.label;
    },
    //所在楼层取消
    onTwo() {
      this.showone = false;
    },
    //所在楼层改变
    onThree(picker, value, index) {
      console.log(`当前值：${value.label}, 当前索引：${index}`);
    },
    //朝向确认
    onfour(value, index) {
      this.showtwo = false;
      console.log(`当前值：${value.label}, 当前索引：${index}`);
      this.cellthree = value.label;
    },
    //朝向取消
    onfive() {
      this.showtwo = false;
    },
    //朝向改变
    onsix(picker, value, index) {
      console.log(`当前值：${value.label}, 当前索引：${index}`);
    },
    //返回上一页
    back() {
      history.back(-1);
    },
    //点击高亮
    btnactive(index, value) {
      this.$refs.actioe[index].classList.toggle("active");
    },
    //请求数据
    addlist() {
      this.$http.get("/houses/params").then((res) => {
        this.Floor = res.data.body.floor;
        this.Oriented = res.data.body.oriented;
        this.RoomType = res.data.body.roomType;
        //  this.Supporting = res.data.body.supporting;
        this.list.forEach((v) => {
          res.data.body.supporting.map((item) => {
            if (v.title === item.label) {
              Object.assign(v, item);
              return v;
            }
          });
        });
      });
    },

    //提交
    btngo() {
      this.$http
        .post("/user/houses", {
          title: this.title,
          description:this.context,
           "houseImg": "img1|im2|img3",
          oriented: this.celltwo,
          supporting: "空调|洗衣机",
          price: this.price,
          roomType: this.cell,
          size: this.size,
          floor: this.cellthree,
          community: this.area,
        })
        .then((res) => {
          console.log(res);
        });
    },
  },

  created() {
    this.addlist();
  },
};
</script>

<style>
.add {
  width: 100%;
  height: 100%;
  background: #e6e6e6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.add-main {
  flex: 1;
  overflow-y: scroll;
}
.add-one {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  font-size: 16px;
}
.add-footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
}
.add-footer button {
  width: calc(100% / 2);
  padding: 12px 85px;
  border: none;
  font-size: 18px;
}
.add-footer button:nth-child(1) {
  background: #fff;
  color: green;
}
.add-footer button:nth-child(2) {
  color: #fff;
  background: green;
}
.add-two {
  width: 100%;
  height: auto;
  background: #fff;
  font-size: 16px;
}
.p1 {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  color: green;
  padding: 0 10px;
  border-top: 1px solid #e6e6e6;
}
.p2 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  border-top: 1px solid #e6e6e6;
}
.p2 span:nth-child(2) {
  display: flex;
  align-items: center;
}
.p2 input {
  border: none;
  text-align: right;
}
.p3 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  border-top: 1px solid #e6e6e6;
}
.p3 input {
  border: none;
}
.p4 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  border-top: 1px solid #e6e6e6;
}
.p4 input {
  border: none;
}
.add-three {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-top: 1px solid #e6e6e6;
}
.van-cell {
  width: 80%;
  text-align: right;
}
.add-four {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-top: 1px solid #e6e6e6;
}
.add-five {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-top: 1px solid #e6e6e6;
}
.add-six {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.add-seven {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
}
.add-seven input {
  width: 100%;
  border: none;
}
.add-eight {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.add-nine {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-top: 1px solid #e6e6e6;
}
.add-ten {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.add-ten-one {
  width: 100%;
  height: 150px;
  padding: 0 10px;
  border-top: 1px solid #e6e6e6;
}
.add-ten-one ul {
  width: 100%;
  height: 140px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-items: center;
}
.add-ten-one ul li {
  display: flex;
  flex-direction: column;
  width: calc(100% / 5);
}
.add-ten-two {
  background: #fff;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  line-height: 40px;
  margin-top: 15px;
  font-size: 16px;
  border-bottom: 1px solid #e6e6e6;
}
.add-ten-three {
  text-align: center;
}
.add-ten-three textarea {
  border: none;
  font-size: 16px;
  padding: 5px;
}
.active {
  color: #21b97a;
}
</style>